<template>
    <div>
        <el-row style="margin-bottom:20px;">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>首页</el-breadcrumb-item>
                <el-breadcrumb-item>荣誉证书</el-breadcrumb-item>
                <el-breadcrumb-item v-if="addImg">新增证书</el-breadcrumb-item>
                <el-breadcrumb-item v-if="detailImg">证书图详</el-breadcrumb-item>
            </el-breadcrumb>
        </el-row>

        <!--证书列表-->
        <el-row v-show='!addImg&&!detailImg'> 
            <el-row>
                <el-col :span='3'>
                    <el-button type="primary" size='small' @click='toAdd'>新增证书</el-button>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span='22'>
                    <el-row style="margin-top:20px;" :gutter="20">
                        <el-col :span="8" v-for="item in imgList" :key='item.certId' style='margin-bottom:20px;'>
                            <el-card :body-style="{ padding: '0px' }">
                            <img :src='item.imgViewUrl' class="image"/>
                            <div style="padding: 10px;">
                                <el-row>
                                    <el-col :span='8'>
                                        <span>序号: {{item.orderNum}}</span>
                                    </el-col>
                                    <el-col :span='8' style="text-align: center;">
                                        <el-tag v-if="item.usable==1" size="small" type="success">可用</el-tag>
                                        <el-tag v-if="item.usable==0" size="small" type="danger">不可用</el-tag>
                                    </el-col>
                                    <el-col :span='8' style="text-align: right;" class='my-detail-button'>
                                        <el-button type="text" class="button" @click='detail(item)'>详情</el-button>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-card>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
        </el-row>

        <!--新增证书-->
        <el-row v-show='addImg&&!detailImg'>
            <el-row> 
                <el-col :span='3'>
                    <el-button type="primary" size='small' @click='addBack'>返回列表</el-button>
                </el-col>
            </el-row>

            <el-row style="margin-top:20px;">
                <el-col :span='10'>
                    <el-form :label-position="addForm.labelPosition" label-width="200px" :model="addForm" ref='addForm' size="small" :rules="addForm.rules">

                        <el-form-item label="证书图片" prop='imgUrl'>
                            <el-upload
                            :action="url"
                            :show-file-list="false"
                            :headers="headers"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                                <img v-if="addForm.imgUrl" :src="addForm.imgViewUrl" style="width:384px;height:180px; border:1px solid #ffffff"/>
                                <img v-else src="../../assets/img/add_img.png" style="width:384px;height:180px; border:1px solid #ffffff;"/>
                            </el-upload>
                            <el-input v-model="addForm.imgUrl" v-show='false'></el-input>
                        </el-form-item>

                        <el-form-item label='是否可用' prop='usable'>
                            <el-switch v-model="addForm.usable"></el-switch>
                        </el-form-item>
                        <el-form-item label="排序号" prop='orderNum'>
                            <el-input-number v-model="addForm.orderNum" :min="1" :max="10" :precision="0"></el-input-number>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm('addForm')">提交</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </el-row>
        
        
        
        <!--证书详情-->
        <el-row v-show='!addImg&&detailImg'> 
            <el-row> 
                <el-col :span='3'>
                    <el-button type="primary" size='small' @click='detailBack'>返回列表</el-button>
                </el-col>
            </el-row>
            <el-row style="margin-top:20px;">
                <el-col :span='10'>
                    <el-form :label-position="detailForm.labelPosition" label-width="200px" :model="detailForm" ref='detailForm' size="small" :rules="detailForm.rules">

                        <el-form-item label="证书图片" prop='imgUrl'>
                            <el-upload
                            :action="url"
                            :show-file-list="false"
                            :headers="headers"
                            :on-success="handleDetailSuccess"
                            :before-upload="beforeAvatarUpload">
                                <img v-if="detailForm.imgUrl" :src="detailForm.imgViewUrl" style="width:384px;height:180px; border:1px solid #ffffff"/>
                                <img v-else src="../../assets/img/add_img.png" style="width:384px;height:180px; border:1px solid #ffffff;"/>
                            </el-upload>
                            <el-input v-model="detailForm.imgUrl" v-show='false'></el-input>
                        </el-form-item>

                        <el-form-item label='是否可用' prop='usable'>
                            <el-switch v-model="detailForm.usable"></el-switch>
                        </el-form-item>
                        <el-form-item label="排序号" prop='orderNum'>
                            <el-input-number v-model="detailForm.orderNum" :min="1" :max="10" :precision="0"></el-input-number>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="ModifyForm('detailForm')">修改</el-button>
                            <el-button type="warning" @click="deleteForm()">删除</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </el-row>

    </div>
</template>
<script>
import conf from '@/utils/conf.js'
export default {
    
    data(){
        return {
            url: conf.baseUrl() + '/api/homeCert/upload',
            addImg: false,
            detailImg: false,
            imgList: [],
            headers: {
                Authorization: sessionStorage.token
            },
            addForm: {
                imgUrl: '',
                imgViewUrl: '',
                labelPosition: 'right',
                usable: true,
                orderNum: 1,
                rules: {
                    imgUrl: [{required: true, message: '请添加证书', trigger: 'blur'}],
                    usable: [{required: true, message: '请选择是否可用', trigger: 'blur'}],
                    orderNum: [{required: true, message: '请设置排序号', trigger: 'blur'}],
                },
            },
            detailForm: {
                certId: '',
                imgUrl: '',
                imgViewUrl: '',
                labelPosition: 'right',
                usable: true,
                orderNum: 1,
                rules: {
                    imgUrl: [{required: true, message: '请添加证书', trigger: 'blur'}],
                    usable: [{required: true, message: '请选择是否可用', trigger: 'blur'}],
                    orderNum: [{required: true, message: '请设置排序号', trigger: 'blur'}],
                },
            }
        }
    },

    methods: {

        toAdd(){
            this.addForm.imgUrl = "";
            this.addForm.imgViewUrl = "";
            this.addForm.usable = true;
            this.addForm.orderNum = 1;
            this.addImg = true;
            this.detailImg = false;
        },

        addBack(){
            this.addImg = false;
            this.detailImg = false;
        },

        detailBack(){
            this.addImg = false;
            this.detailImg = false;
        },

        detail(item){
            console.log(item)
            this.detailForm.certId = item.certId;
            this.detailForm.imgUrl = item.imgUrl;
            this.detailForm.imgViewUrl = item.imgViewUrl;
            this.detailForm.usable = item.usable==1?true:false;
            this.detailForm.orderNum = item.orderNum;
            this.addImg = false;
            this.detailImg = true;
            console.log(this.detailForm)
        },

        handleDetailSuccess(res, file) {
            console.log(res)
            this.detailForm.imgUrl = res.data.imgUrl;
            this.detailForm.imgViewUrl = res.data.prefix + res.data.imgUrl;
        },


        handleAvatarSuccess(res, file) {
            console.log(res)
            this.addForm.imgUrl = res.data.imgUrl;
            this.addForm.imgViewUrl = res.data.prefix + res.data.imgUrl;
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isPNG = file.type === 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!(isJPG||isPNG)) {
                this.$message.error('图片只能是 JPG 或者 PNG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('图片大小不能超过 2MB!');
            }
            return (isJPG||isPNG) && isLt2M;
        },
        submitForm(formName){
            this.$refs[formName].validate((valid) => {
                if(valid){
                    let p = {};
                    let url = '/api/homeCert/add';
                    p.imgUrl = this.addForm.imgUrl;
                    p.orderNum = this.addForm.orderNum;
                    p.usable = this.addForm.usable ? 1 : 0;
                    this.$http.fetch(url, p)
                    .then(res=>{
                        this.listAll();
                        this.addImg = false;
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },

        ModifyForm(formName) {
            console.log(formName)
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    console.log(this.detailForm)
                    this.$confirm('此操作将替换之前的内容, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                        })
                    .then(() => {
                       let p = {};
                       let url = '/api/homeCert/modify'
                       p.certId = this.detailForm.certId;
                       p.imgUrl = this.detailForm.imgUrl;
                       p.usable = this.detailForm.usable ? 1 : 0;
                       p.orderNum = this.detailForm.orderNum;
                       return this.$http.fetch(url, p)

                    })
                    .then(res=>{
                        this.listAll();
                        this.detailImg = false;
                    })
                    
                    .catch(() => {
                           
                    });
                }
            })
        },
        deleteForm(){
            this.$confirm('确定删除该证书吗?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                        })
            .then(() => {
                let p = {};
                let url = '/api/homeCert/delete';
                p.certId = this.detailForm.certId;
                return this.$http.fetch(url, p)
            })
            .then(()=>{
                this.listAll();
                this.detailImg = false;
            })
            .catch(()=>{

            })
        },

        listAll(){
            let p = {};
            let url = "/api/homeCert/listAll";
            this.$http.fetch(url, p)
            .then(res=>{
                this.imgList = res.data;
            })
            .catch(err=>{

            })
        },
    },

    mounted(){
        this.listAll();
    }
}
</script>
<style scoped>
.image {
    width: 100%;
    display: block;

  }
.my-detail-button .el-button{
    padding: 0;
}
</style>